<template>
	<view>
		<view style="height: 18upx;"></view>
		<block v-if="this.authFlag != '10'">
			<view class="card-view">
				<view class="status-view">
					<image v-if="this.authFlag == '30'" src="/static/authentication-succeed-two.png"
						class="status-image">
					</image>
					<image v-else src="/static/authentication-succeed-one.png" class="status-image"></image>
				</view>

				<block v-if="this.authFlag == '30'">
					<view class="cell-view">
						<view class="label-text">认证类型</view>
						<view class="value-text">企业认证</view>
					</view>
					<view class="title-view" style="padding: 0;margin-top: 27upx;margin-bottom: 18upx;">实际联系人信息</view>
					
					<view class="cell-view">
						<view class="label-text row-between">
							<view>联</view>
							<view>系</view>
							<view>人</view>
						</view>
						<view class="value-text">{{userInfo.firmContactPerson}}</view>
					</view>
					<view class="cell-view">
						<view class="label-text">手机号码</view>
						<view class="value-text">{{userInfo.firmContactPhone}}</view>
					</view>
					<view class="title-view" style="padding: 0;margin-top: 27upx;margin-bottom: 18upx;">企业信息</view>
					
					<view class="cell-view">
						<view class="label-text row-between">
							<view>法</view>
							<view>人</view>
						</view>
						<view class="value-text">{{userInfo.firmLegalPerson}}</view>
					</view>
					<view class="cell-view">
						<view class="label-text">企业名称</view>
						<view class="value-text">{{userInfo.firmName}}</view>
					</view>
					<view class="cell-view" style="align-items: flex-end;">
						<view class="label-text">
							<view>统一社会</view>
							<view>信用代码</view>
						</view>
						<view class="value-text">{{userInfo.firmNumber}}</view>
					</view>
					<view class="image-view">
						<view class="image-item">
							<image :src="`${IMG_URL}${formData.firmLicenseImg}`" class="image-css" mode="aspectFill">
							</image>
							<view>企业营业执照</view>
						</view>
						<view class="image-item">
							<image :src="`${IMG_URL}${formData.firmCorpuscleImg}`" class="image-css" mode="aspectFill">
							</image>
							<view>企业电子章</view>
						</view>
						<view class="image-item">
							<image :src="`${IMG_URL}${formData.firmMethodUrl}`" class="image-css" mode="aspectFill">
							</image>
							<view>企业法人电子章</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="cell-view">
						<view class="label-text">认证类型</view>
						<view class="value-text">个人认证</view>
					</view>
					<view class="cell-view">
						<view class="label-text">姓名</view>
						<view class="value-text">{{userInfo.realName}}</view>
					</view>
					<view class="cell-view">
						<view class="label-text">身份证号</view>
						<view class="value-text">{{userInfo.cardNumber}}</view>
					</view>
					<view class="image-view">
						<view class="image-item">
							<image :src="`${IMG_URL}${formData.firmMethodUrl}`" class="image-css" mode="aspectFill">
							</image>
							<view>身份证正面</view>
						</view>
						<view class="image-item">
							<image :src="`${IMG_URL}${formData.firmMethodUrl}`" class="image-css" mode="aspectFill">
							</image>
							<view>身份证背面</view>
						</view>
					</view>
				</block>
			</view>
		</block>
		<block v-else>
			<view class="form-view">
				<view class="form-item">
					<view class="form-label required">认证类型</view>
					<view class="form-content" @click="isPickerCustom = true">
						<view class="form-item-text">{{formData.authFlag == '30' ? '企业认证' : '个人认证'}}</view>
						<uni-icons type="right" size="29upx" color="#B8ACA3"></uni-icons>
					</view>
				</view>
			</view>

			<block v-if="formData.authFlag == '30'">
				<view class="title-view">实际联系人信息</view>
				<view class="form-view">
					<view class="form-item">
						<view class="form-label required row-start">
							<view style="width: 116upx;" class="row-between">
								<view>联</view>
								<view>系</view>
								<view>人</view>
							</view>
						</view>
						<view class="form-content">
							<input v-model="formData.firmContactPerson" maxlength="60" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-label required">手机号码</view>
						<view class="form-content">
							<input v-model="formData.firmContactPhone" maxlength="11" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" />
						</view>
					</view>
				</view>
				<view class="title-view">企业信息</view>
				<view class="form-view">
					<view class="form-item">
						<view class="form-label required row-start">
							<view style="width: 116upx;" class="row-between">
								<view>法</view>
								<view>人</view>
							</view>
						</view>
						<view class="form-content">
							<input v-model="formData.firmLegalPerson" maxlength="60" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-label required">企业名称</view>
						<view class="form-content">
							<input v-model="formData.firmName" maxlength="60" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							<view>统一社会</view>
							<view class="required">信用代码</view>
						</view>
						<view class="form-content">
							<input v-model="formData.firmNumber" maxlength="60" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" />
						</view>
					</view>
				</view>
				<view class="form-view">
					<view class="form-item" style="padding-bottom: 18upx;">
						<view class="form-label" style="width: initial;">
							<view class="required">营业执照复印件</view>
							<view class="label-desc" style="color: #FF2615;">需加盖企业公章</view>
						</view>
						<view @click="onChooseImage('firmLicenseImg')" class="form-content"
							style="justify-content: flex-end;width: initial;">
							<image v-if="formData.firmLicenseImg" :src="`${IMG_URL}${formData.firmLicenseImg}`"
								class="uploading"></image>
							<image v-else src="/static/personal-uploading.png" class="uploading"></image>
						</view>
					</view>
					<view class="form-item" style="padding-bottom: 18upx;">
						<view class="form-label" style="width: initial;">
							<view>企业电子公章</view>
							<view class="label-desc">用于生成合同</view>
						</view>
						<view @click="onChooseImage('firmCorpuscleImg')" class="form-content"
							style="justify-content: flex-end;width: initial;">
							<image v-if="formData.firmCorpuscleImg" :src="`${IMG_URL}${formData.firmCorpuscleImg}`"
								class="uploading"></image>
							<image v-else src="/static/personal-uploading.png" class="uploading"></image>
						</view>
					</view>
					<view class="form-item" style="padding-bottom: 18upx;">
						<view class="form-label" style="width: initial;">
							<view>企业电子法人章</view>
							<view class="label-desc">用于生成合同</view>
						</view>
						<view @click="onChooseImage('firmMethodUrl')" class="form-content"
							style="justify-content: flex-end;width: initial;">
							<image v-if="formData.firmMethodUrl" :src="`${IMG_URL}${formData.firmMethodUrl}`"
								class="uploading"></image>
							<image v-else src="/static/personal-uploading.png" class="uploading"></image>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="form-view">
					<view class="form-item">
						<view class="form-label required row-start">
							<view style="width: 116upx;" class="row-between">
								<view>国</view>
								<view>籍</view>
							</view>
						</view>
						<view class="form-content" @click="isDrawer = true">
							<view class="form-item-text">{{formData.nationalityName}}</view>
							<uni-icons type="right" size="29upx" color="#B8ACA3"></uni-icons>
						</view>
					</view>
				</view>
				<view class="uploading-view">
					<view class="uploading-item" @click="onChooseImage('cardIsImg')">
						<image v-if="formData.cardIsImg" :src="`${IMG_URL}${formData.cardIsImg}`"
							class="uploading-image" mode="aspectFill"></image>
						<image v-else src="/static/card-front.png" class="uploading-image" mode="aspectFill"></image>
						<view>身份证正面</view>
					</view>
					<view class="uploading-item" @click="onChooseImage('cardTheImg')">
						<image v-if="formData.cardTheImg" :src="`${IMG_URL}${formData.cardTheImg}`"
							class="uploading-image" mode="aspectFill"></image>
						<image v-else src="/static/card-back.png" class="uploading-image" mode="aspectFill"></image>
						<view>身份证背面</view>
					</view>
				</view>
				<view class="form-view">
					<view class="form-item">
						<view class="form-label required row-start">
							<view style="width: 116upx;" class="row-between">
								<view>姓</view>
								<view>名</view>
							</view>
						</view>
						<view class="form-content">
							<input v-model="formData.realName" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" maxlength="20" />
						</view>
					</view>
					<view class="form-item">
						<view class="form-label required">身份证号</view>
						<view class="form-content">
							<input v-model="formData.cardNumber" type="idcard" placeholder="请输入" class="input-css"
								placeholder-class="plac-css" maxlength="30" />
						</view>
					</view>
				</view>
			</block>
			<view class="form-view">
				<view class="form-item">
					<view class="form-label required">顾问工号</view>
					<view class="form-content">
						<input v-model="formData.advisoryNumber" placeholder="请输入" class="input-css"
							placeholder-class="plac-css" maxlength="30" />
					</view>
				</view>
			</view>
			<FloatView>
				<FloatButton @click="onSubmit">保存</FloatButton>
			</FloatView>
		</block>
		<view style="height: 260upx;"></view>
		<PickerCustom v-if="isPickerCustom" :value="[authentication]" :list="[{label: '个人认证'},{label: '企业认证'}]"
			title="认证类型" @cancel="isPickerCustom = false" @confirm="onPickerConfirm"></PickerCustom>

		<CountryDrawer v-if="isDrawer" @change="onDrawerChange"></CountryDrawer>

	</view>
</template>

<script>
	import CountryDrawer from './components/CountryDrawer.vue'
	export default {
		components: {
			CountryDrawer
		},
		data() {
			return {
				isDrawer: false,
				isPickerCustom: false,
				authentication: 0,
				authFlag: '10',
				formData: {
					"authFlag": "30", //认证类型  20个人 30企业
					"nationalityId": "", //国家ID
					"nationalityName": "", //国家名称
					"advisoryNumber": "",
					"realName": "",
					"cardNumber": "",
					"cardIsImg": "", //身份证正面照片URL(类型20存在)
					"cardTheImg": "", // 身份证反面照片URl(类型20存在)
					"firmName": "",
					"firmNumber": "",
					"firmLicenseImg": "",
					"firmCorpuscleImg": "",
					"firmMethodUrl": "",
					firmLegalPerson: "", //企业法人姓名
					firmContactPerson: "", //企业联系人姓名
					firmContactPhone: "", //企业联系人电话

				},
				userInfo: {

				}
			}
		},
		onLoad(options) {
			this.authFlag = options.authFlag
			if (this.authFlag != '10') return this.getUserInfo()
			this.getNationalityPage()
		},
		onShow() {},
		methods: {
			async getUserInfo() {
				const res = await uni.$api.getUserInfo()
				this.userInfo = res.data
			},
			async onSubmit() {
				const formData = this.formData
				const showToast = uni.$util.showToast
				const regex = uni.$util.regex
				if (formData.authFlag == '20') {
					if (!formData.nationalityId) return showToast('请选择国籍')
					if (!formData.cardIsImg) return showToast('请上传身份证正面')
					if (!formData.cardTheImg) return showToast('请上传身份证背面')
					if (!formData.realName) return showToast('请输入姓名')
					if (!formData.cardNumber) return showToast('请输入身份证号')
				} else if (formData.authFlag == '30') {
					if (!formData.firmContactPerson) return showToast('请输入联系人姓名')
					if (!formData.firmContactPhone) return showToast('请输入联系人电话')
					if (!regex.phone.test(formData.firmContactPhone)) return showToast('请输入正确的联系人电话')
					if (!formData.firmLegalPerson) return showToast('请输入法人姓名')
					if (!formData.firmName) return showToast('请输入企业名称')
					if (!formData.firmNumber) return showToast('请输入社会信用代码')
					if (!formData.firmLicenseImg) return showToast('请上传营业执照')
					if (!formData.firmCorpuscleImg) return showToast('请上传电子公章章')
					if (!formData.firmMethodUrl) return showToast('请上传电子法人章')
				}
				if (!formData.advisoryNumber) return showToast('请输入顾问工号')
				uni.$util.showLoading()
				await uni.$api.realNameAuth(formData).finally(uni.finally)
				await uni.$util.showSuccess()
				uni.navigateBack()
			},
			async onChooseImage(key) {
				const image = await uni.$util.chooseImage(1)
				if (!image.length) return
				const res = await uni.$api.uploadFile(image[0])
				this.formData[key] = res.data.fileObjectName
			},
			onDrawerChange(event) {
				this.formData.nationalityId = event.nationalityId
				this.formData.nationalityName = event.name
				this.isDrawer = false
			},
			onPickerConfirm(event) {
				console.log('onPickerConfirm----', event);
				this.formData.authFlag = event.index == 1 ? '30' : '20'
				this.isPickerCustom = false
			},
			async getNationalityPage() {
				const res = await uni.$api.getNationalityPage({
					pageSize: '1000',
					pageNo: 1
				})
				const list = res.data.rows || []
				const entity = list.find(item => item.flag == '10')
				if (!entity) return
				this.formData.nationalityId = entity.nationalityId
				this.formData.nationalityName = entity.name
			}
		}
	}
</script>

<style scoped lang="scss">
	.image-view {
		width: 100%;
		@extend .row-between;
		flex-wrap: wrap;

		.image-item {
			width: calc(100% /2 - 36upx);
			font-size: 29rpx;
			font-weight: 400;
			color: #B8ACA3;
			@extend .column;
			margin-top: 43upx;

			.image-css {
				width: 100%;
				height: 165upx;
				margin-bottom: 22upx;
				border-radius: 8upx;
			}
		}
	}

	.uploading-view {
		width: 100%;
		padding: 22upx;
		@extend .row-between;
		margin-bottom: 14upx;

		.uploading-item {
			width: calc(100% /2 - 9upx);
			font-size: 29rpx;
			font-weight: 400;
			color: #B8ACA3;
			@extend .column;

			.uploading-image {
				width: 100%;
				height: 207upx;
				margin-bottom: 25upx;
				border-radius: 8upx;
			}
		}
	}

	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 85upx 60upx;
		padding-bottom: 36upx;

		.status-view {
			width: 225upx;
			height: 225upx;
			margin: 0 auto;
			margin-bottom: 80upx;

			.status-image {
				width: 100%;
				height: 100%;
			}
		}

		.cell-view {
			width: 100%;
			@extend .row-start;

			.label-text {
				width: 116upx;
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
				@extend .row-between;
			}

			.value-text {
				flex: 1;
				margin-left: 20upx;
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;
			}
		}

		.cell-view+.cell-view {
			margin-top: 18upx;
		}
	}
	.title-view {
		width: 100%;
		padding: 0 50upx;
		font-weight: 600;
		font-size: 29rpx;
		color: #2C1101;
		position: relative;
		margin-top: 36upx;
		margin-bottom: 22upx;
		&:before {
			content: "";
			width: 56rpx;
			height: 14rpx;
			background: rgba(255,38,21,0.1);
			position: absolute;
			left: 50upx;
			bottom: 0;
		}
	}
	.form-view {
		width: 707rpx;
		margin: 0 auto;
		padding: 0 40upx;
		background: #FFFFFF;
		border-radius: 14rpx;

		.form-item {
			width: 100%;
			padding: 34upx 0;
			@extend .row-between;

			.form-label {
				width: 186upx;
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;

				.label-desc {
					font-size: 22rpx;
					color: #B8ACA3;
				}
			}

			.required {
				&::after {
					content: "*";
					color: #FF442F;
					margin-left: 12upx;
				}
			}

			.form-content {
				width: calc(100% - 186upx);
				@extend .row-between;
				font-size: 29rpx;
				font-weight: 400;
				color: #2C1101;

				.uploading {
					width: 92upx;
					height: 92upx;
					border-radius: 4upx;
				}

				.input-css {
					flex: 1;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
				}

				.plac-css {
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #B2B2CA;
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #E9E9F4;
		}
	}

	.form-view+.form-view {
		margin-top: 18upx;
	}
</style>